<!DOCTYPE html>
<html lang="en">
<!--导入定义的变量-->
<#include "common/virs.ftl" />
<head>
    <meta charset="UTF-8">
    <title>HyBlog首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="hyblog,博客,杨德明,杨德明的个人博客,it,技术">
    <meta name="description" content="站长专注于java开发，高并发、高可用、分布式……">
    <link rel="shortcut icon" href="./static/pic/favicon.ico">
    <link rel="stylesheet" href="${layui_css}">
    <link rel="stylesheet" href="${main_css}">
    <!-- 字体 -->
    <link rel="stylesheet" href="${font_awesome_css}">
    <!--动画-->
    <link href="${animate_css}" rel="stylesheet">
</head>
<body>
<!--整体容器-->
<div class="hy-blog">

    <!--导航条导入-->
    <#include "templates/nav.html" />
    <!-- 主体内容 -->
    <div class="layui-container">
        <div class="layui-row layui-col-space15">
            <!--公告-->
            <div class="notice" style="color: red"><i class="fa fa-bell" aria-hidden="true" style="font-size: 25px; color: #1E9FFF;"></i>
                <span id="notice-span"><span class="animated fadeIn">公告：欢迎访问本站，祝您生活愉快~万事如意，事事顺心</span></span>
            </div>
            <!--主体内容-->
            <!--文章主体区域-->
            <div class="layui-col-md8 animated fadeInLeft">
                <!--banner-->
                <div class="layui-carousel" id="banner">
                    <div carousel-item>
                        <#list carouselList as carousel>
                            <div><a  href="${carousel.url}"><img src="${carousel.imgurl}"/></a> </div>
                        </#list>
                    </div>
                </div>
                <!--文章列表-->
                <ul class="blog_list">
                    <#list articleVoList as article>
                        <li class="blog_card" style="border-radius:10px">
                            <button onclick="window.location.href='/articlelist?cid=${article.categoryId}'" class="layui-btn layui-btn-mini layui-btn-warm reprint">${article.category}</button>
                            <h2 class="title"><a id="article_search" href="/details?aid=${article.aid}">${article.title}</a></h2>
                            <div class="layui-row">
                                <div class="layui-col-sm6">
                                    <img class="pic" src="${article.imgUrl}" />
                                </div>
                                <div class="layui-col-sm6">
                                    <div class="desc" style="float: right;display: block;">${article.summary}</div>
                                </div>
                            </div>
                            <div class="data">
                                <span><i class="fa fa-calendar" aria-hidden="true"></i> ${article.createTime?string('yy/MM/dd HH:mm:ss')}</span>
                                <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> ${article.votes}</span>
                                <span><i class="fa fa-eye" aria-hidden="true"></i> ${article.hits}</span>
                                <!--<span><i class="fa fa-comments" aria-hidden="true"></i>还没做</span>-->
                            </div>
                        </li>
                    </#list>


                </ul>
                <!--分页-->
                <div style="text-align: center;"><div id="paging" style="display: inline;"></div></div>
            </div>

            <!--导入右侧辅助区域-->
            <#include "templates/right.html"/>

        </div>
    </div>
    <!-- 主体内容end -->


    <!--导入footer-->
    <#include "templates/foot.html" />
</div>
<script src="${layui_js}"></script>
<script>
    //config的设置是全局的
    layui.config({
        base: '/static/js/' //假设这是你存放拓展模块的根目录
    });
    layui.use(['element', 'carousel','util','laypage','common'], function () {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        var carousel = layui.carousel;
        var util = layui.util;
        var laypage = layui.laypage;
        var $ = layui.jquery;
        var common = layui.common;

        //给右侧qq，微信按钮绑定点击事件，点击后出现二维码
        common.bindQQ();
        common.bindWechat();
        //异步请求分类,标签,友链信息
        common.querycategory();
        common.querytag();
        common.queryfriendshiplink();
        //获取公告
        common.getNotice();

        //给【博客首页】添加layui-this的样式
        $("#nav-home").addClass("layui-this");

        //监听导航点击
        element.on('nav(demo)', function (elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });
        //建造实例
        carousel.render({
            elem: '#banner'
            , width: '100%' //设置容器宽度
            , arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
        //执行
        util.fixbar({
            bar1: false
            ,click: 'top'
        });
        //执行一个laypage实例
        laypage.render({
            elem: 'paging'
            ,curr : ${page}
            ,count: ${allNums} //数据总数，从服务端得到
            ,jump: function(obj, first){
                //obj包含了当前分页的所有参数，比如：
                //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                //console.log(obj.limit); //得到每页显示的条数
                //首次不执行
                if(!first){
                    // article/3/10   第三页，每页10条
                    window.location.href="/index?page="+obj.curr+"&limit="+obj.limit;
                }
            }
        });
    });
</script>
</body>
</html>